<template>
  <view>
    <view class="wrap" :style="Height">
      <view class="u-tabs-box">
        <view class="dropdown">
          <view @click="dropdownShow = true">
            地区
          <u-icon name="arrow-down" size="24" style="margin-left: 10rpx;"></u-icon>
          </view>
        </view>
        <u-tabs-swiper id="target" active-color="#fed500" inactive-color="#000000" ref="tabs" :list="lists" :current="current"
          @change="change" bar-width="60"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
            <view class="page-box">
              <view class="home-content">
                <view class="scroll-circle-item_H" v-for="(item,index) in 5" :key="index">
                  <view class="scroll-circle-img_H">
                    <image src="/static/image/111.png" mode="aspectFit" class="scroll-img"></image>
                    <text class="iconfont icon-zhiding scroll-view-top_H" v-show="index === 0"></text>
                    <view class="play"><text class="iconfont icon-bofang play_icon"></text></view>
                    <view class="opaticy">
                      <view class="opaticy-cont">
                        <view class="opaticy-cont__l u-line-2">2023健身跨年配队/篝火晚会(汕头)暨金维斯健身俱乐部会员年会</view>
                        <view class="opaticy-cont__r">
                          <text class="iconfont icon-didian" style="font-size: 36rpx;margin-right: 8rpx;"></text>
                          <text>广东汕头</text>
                          </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="u-m-36">
                <u-loadmore :status="status" />
              </view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh1" @refresherrestore="onRestore">
            <view class="page-box">
              
              <view style="height: 50rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <u-popup v-model="dropdownShow" mode="top">
      <view class="slot-content">
        <view class=""><text>选择地区</text></view>
      	<view class="item-box">
      		<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in list" :key="index">
      			{{item.label}}
      		</view>
      	</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  var vm;
  export default {
    data() {
      return {
        lists: [{
            name: '最新'
          },
          {
            name: '回顾'
          },
        ],
        status:'nomore',
        current: 0,
        swiperCurrent: 0,
        tabsHeight: 0,
        dx: 0,
        triggered:true,
        list: [{
        		label: '地区1',
        		active: true,
        	},
        	{
        		label: '地区2',
        		active: false,
        	},
        	{
        		label: '地区3',
        		active: false,
        	},
        	{
        		label: '地区4',
        		active: false,
        	},
          {
          	label: '地区5',
          	active: false,
          },
          {
          	label: '地区6',
          	active: false,
          },
        ],
        mask: true,
        activeColor: '#fed500',
        Height:0,
        dropdownShow:false,
      };
    },
    onLoad() {
      vm = this;
    },
    mounted() {
      // #ifdef H5 || APP-PLUS
      uni.createSelectorQuery().in(this).select("#target").boundingClientRect(data => {
        this.Height = 'height: calc(100vh - '+(data.height)+'px);'
      }).exec() 
      // #endif
    
    },
    methods: {
      tagClick(index) {
      	this.list[index].active = !this.list[index].active;
      },
      reachBottom() {
        
      },
      // tab栏切换
      change(index) {
        this.swiperCurrent = index;
      },
      transition({
        detail: {dx}
      }) 
      {
        this.$refs.tabs.setDx(dx);
      },
      animationfinish({
        detail: {
          current
        }
      }) 
      {
        this.$refs.tabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },

      /**
       * 自定义下拉刷新控件被下拉
       */
      onPulling(){
        this.triggered = true
      },
      
      /**
       * 自定义下拉刷新被触发
       */
      onRefresh(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      onRefresh1(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      
      /**
       * 自定义下拉刷新被中止
       */
      onRestore(){
        this.triggered = false
      }
    }
  };
</script>



<style lang="scss" scoped>
  .wrap {
    display: flex;
    flex-direction: column;
    /* #ifdef MP-WEIXIN */
    height: calc(100vh - var(--window-top));
    /* #endif */
    width: 100%;
  }
  .swiper-box {
    flex: 1;
  }
  .swiper-item {
    height: 100%;
  }
  .img{
    width: 100%;
    height: 100%;
  }
  .page-box{
    padding: 0 32rpx;
  }
  .home-content{
    width: 100%;
    //圈子 ---
    .scroll-circle-item_H{
      width: 100%;
      height: 420rpx;
      margin-top: 32rpx;
      .scroll-circle-img_H{
        width: 100%;
        height: 420rpx;
        min-height: 420rpx;
        position: relative;
        border-radius: 28rpx;
        overflow: hidden;
        .opaticy{
          width: 100%;
          background-color: rgba(0,0,0,0.4);
          position: absolute;
          bottom: 0px;
          color: #ffffff;
          padding:20rpx;
          .opaticy-cont{
            display: flex;
            align-items: flex-end;
            justify-content: center;
            .opaticy-cont__l{
              flex: 1;
            }
            .opaticy-cont__r{
              display: flex;
              align-items: flex-end;
              height: 100%;
              margin-left: 32rpx;
            }
          }
        }
      }
      .scroll-img{
        width: 100%;
        height: 100%;
        border-top-left-radius: 28rpx;
        border-top-right-radius: 28rpx;
      }
      .scroll-view-top_H{
        position: absolute;
        bottom: 100rpx;
        left: -4rpx;
        z-index: 1;
        font-size: 72rpx;
        color: #fed500;
      }
      .play{
        position: absolute;
        z-index: 11;
        top: 50%;
        left: 50%;
        margin-left: -68rpx;
        margin-top: -68rpx;
        .play_icon{
          font-size: 128rpx;
          color: rgba(255,255,255,0.4);
        }
      }
      
      
    }
    //圈子 ---
  }
  .slot-content{
    width: 100%;
    background-color: #fff;
    padding: 9px;
    .item-box{
      margin-bottom: 20rpx;
      display: flex;
      flex-wrap: wrap;
    }
    .item{
      color: #333333;
      padding: 6rpx 10rpx;
      border-radius: 10rpx;
      margin-top: 16rpx;
      margin-right: 12rpx;
    }
    .active{
      color: #333333;
      background-color: #fed500;
    }
    
  }
  .dropdown{
    position: absolute;
    height: 100rpx;
    padding: 32rpx;
    z-index: 11;
  }
</style>
